<template>
  <div class="container">
    <!-- <div class="box">
      <header class="header">首页 header</header>
      <div class="content">内容 content</div>
    </div> -->
    <router-view/>
    <footer class="footer" v-if="!$route.meta.hidden">
      <ul>
        <router-link to = "/home" tag="li">
          <span class="iconfont icon-zhuye"></span>
          <p>首页</p>
        </router-link>
        <router-link to = "/kind" tag="li">
          <span class="iconfont icon-leimupinleifenleileibie"></span>
          <p>分类</p>
        </router-link>
        <router-link to = "/cart" tag="li">
          <span class="iconfont icon-buy"></span>
          <p>购物车</p>
        </router-link>

        <router-link to = "/user" tag="li" v-if="isLogin">
          <span class="iconfont icon-profile"></span>
          <p>我的</p>
        </router-link>
        <router-link to = "/login" tag="li" v-else>
          <span class="iconfont icon-profile"></span>
          <p>未登录</p>
        </router-link>
      </ul>
    </footer>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>

<script>
export default {
  computed: {
    isLogin () {
      return this.$store.state.isLogin
    }
  }
}
</script>

<style lang="stylus">
*
  margin 0
  padding 0
  list-style none
html
  font-size 26.666667vw
body
  font-size 0.26rem
html,body,.container
  width 100%
  height 100%
.container
  max-width 960px
  margin 0 auto
  display flex
  flex-direction column
  .box
    display flex
    flex 1
    flex-direction column
    .header
      height 0.44rem
      background-color #ef8888
    .content
      flex 1
  .footer
    height 0.5rem
    background-color rgba(246,245,236,0.5)
    ul
      width 100%
      height 100%
      display flex
      li
        display flex
        flex 1
        justify-content center
        align-items center
        flex-direction column
        margin-top 0.05rem
        &.router-link-active
          color red
        p
          font-size 0.12rem
  .tip
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    background-color rgba(0,0,0,0.5)
    color white
    font-size 25px
    display none
    justify-content center
    align-items center
  @media screen and (orientation landscape)
    .tip
      display flex
@media screen and (min-width 860px)
  html
    font-size 100px
</style>
